<script setup>
import { ref, onMounted } from 'vue';
import SidebarItem from '@/layouts/sidebar/sidebarItem';
import Logo from'@/layouts/logo/logo'
import { useRoutersStore } from '@/stores';
import { useRoute } from 'vue-router';


const props=defineProps({
    isCollapse:{
        type:Boolean,
    }
})


// 初始化数据
const useRouters = useRoutersStore()
const route = useRoute()
const activeMenu = ref(''); // 当前选中的菜单项
const menus = ref(useRouters.menus); // 菜单数据
activeMenu.value = route.path
// const getMenus=()=>{
//     menus.value = useRouters.menus;
// }

// onMounted(()=>getMenus())
</script>

<template>
    <el-scrollbar class="scrollbar" v-if="menus && menus.length > 0">
        <el-menu
            class="el-menu-vertical-demo"
            :default-active="activeMenu" 
            router
            unique-opened 
            :collapse="isCollapse"
            :popper-effect="'light'"
            :collapse-transition="false"
        >
            <Logo v-model:isCollapse="props.isCollapse"/>
            <template v-for="menu in menus">
                <SidebarItem v-if="!menu.hidden && menu.meta!==null" :menu="menu" :basePath="menu.path"/>
                <el-menu-item v-else :index="'/' + menu.children[0].path">
                    <el-icon><component class="icon" :is="menu.children[0].meta.icon"/></el-icon>
                    <span>{{ menu.children[0].meta.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<style scoped lang='scss'>

.scrollbar{
    height:100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height:100vh;  // 不加也行，但是感觉有点卡壳
}

.el-menu--collapse{
    width: 67px;
    min-height:100vh;  // 不加也行，但是感觉有点卡壳
}

.el-menu{
    border-right: 0!important;
}

.el-aside{
   // 侧边栏折叠动画速度
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
  }
</style>